<!DOCTYPE HTML> 
<html>
<head><title>Game Class File
</title>
    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script language="javascript" src="jquery.hotkeys.js" type="text/javascript"></script>
    <script language="javascript" src="key_status.js" type="text/javascript"></script>
</head>

<body>
<canvas id="myCanvas" width="840" height="480" style="border:1px solid #000000;">

Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">
// initialize javascript canvas elements
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d"); // temporarily a 2D context


	
/*
 * all book keeping variables go here
 */
var FPS = 60; // set the frame rate to 60

// this will be the ball object that the player has control of
function playerBall() {
	this.x_vel = 0;
	this.y_vel = 0;
	this.x_pos = 50;
	this.y_pos = 50;
	this.inPlay = true;
	// drawFunction: draw(),
	this.update = function() {
		this.x_pos += this.x_vel;
		this.y_pos += this.y_vel;
		
		// gravity
		this.x_vel += 0;
		this.y_vel += 0.091;
		
		// check bounds, 
		if (this.y_pos >= 480) {
			this.y_vel = -this.y_vel;
		}
		
		// because the surfaces are always attenuating the velocity
		if (this.y_pos >= 475 && this.y_pos <= 485) {
			this.y_vel *= 0.70;
			//this.x_vel *= 0.70;
		}
		
		this.x_vel *= 0.95;

		// set the maximum velocity
		if (this.x_vel >= 7.5) {
			this.x_vel = 7.5;
		}
		if (this.x_vel <= -7.5) {
			this.x_vel = -7.5;
		}
		
	};
	// ^ Note: this function will calculate physics, etc.
	
	return this;
}

// this will be an "obstacle" element
function Obstacle(x, y, x_, y_) {
	this.minx = x;
	this.maxx = y;
	this.miny = x_;
	this.maxy = y_;
	
	// the update function that involves physics, updating obstacles may
	// prove interesting
	//this.update = function() {};
	
	return this;
}

/*
 * Create game objects and draw fields
 * Also include information for changing the ball's direction and velocity
 * based on keyboard strokes (right now, just up and down)
 */
 
 var mainBall = new playerBall();
 
 var box1 = new Obstacle(40, 400, 40, 480);

/*
 * update methods, etc.
 */
 
 // handles indent
function handleKeyDown(evt) {

	switch (evt.keyCode) {
		case 38:  /* Up arrow was pressed */
			if (mainBall.y_pos >= 475) {
				mainBall.y_vel -= 5.20;
			}
			break;
		case 40:  /* Down arrow was pressed */
			mainBall.y_vel += 0.20;
			break;
		case 37:  /* Left arrow was pressed */
			mainBall.x_vel -= 0.70;
			break;
		case 39:  /* Right arrow was pressed */
			mainBall.x_vel += 0.70;
			break;

	}
}

// need to add event
window.addEventListener('keydown', handleKeyDown, true);
 
function drawBall(context, ball) {
	context.beginPath();
	context.fillStyle = "#000000";
	context.arc(ball.x_pos, ball.y_pos, 10, 0, Math.PI*2, true);
	context.closePath();
	context.stroke();
}

function drawObstacle(context, obstacle) {
	context.beginPath();
	context.fillStyle = "#00FF00";
	context.fillRect((obstacle.maxx - obstacle.minx)/2, (obstacle.maxy - obstacle.miny)/2, obstacle.maxx - obstacle.minx, obstacle.maxy - obstacle.miny); 
	context.closePath();
	context.stroke();
}
 
 // sets the interval for updating the screen
setInterval(function () {
	update();
    draw();
}, 1000 / FPS);

function update() {
	mainBall.update();
}

function draw() {
	// clear the window
	context.fillStyle = "#ffffff";
	context.fillRect(0, 0, 840, 480);
	
	// draw the ball object
	drawBall(context, mainBall);
	drawObstacle(context, box1);

}
 
 
</script>

</body>
</html>
